<template>
	<div class="content">
		<div class="partners">
			<div class="accordion">
				<div class="accordion-item">
					<div class="accordion-model"></div>
					<div class="accordion-box">
						<div class="accordion-header">{{$t("partners1.name")}}</div>
						<div class="accordion-content">
							<p>{{$t("partners1.info")}}</p>
						</div>
					</div>
				</div>
				<div class="accordion-item">
					<div class="accordion-model"></div>
					<div class="accordion-box">
						<div class="accordion-header">{{$t("partners2.name")}}</div>
						<div class="accordion-content">
							<p>{{$t("partners2.info")}}</p>
						</div>
					</div>
				</div>
				<div class="accordion-item">
					<div class="accordion-model"></div>
					<div class="accordion-box">
						<div class="accordion-header">{{$t("partners3.name")}}</div>
						<div class="accordion-content">
							<p>{{$t("partners3.info")}}</p>
						</div>
					</div>
				</div>
				<div class="accordion-item">
					<div class="accordion-model"></div>
					<div class="accordion-box">
						<div class="accordion-header">{{$t("partners4.name")}}</div>
						<div class="accordion-content">
							<p>{{$t("partners4.info")}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		name: "partners",
		data() {
			return {

			};
		},
		mounted() {
			this.toggleAccordion()
		},
		methods: {
			toggleAccordion(index) {
				var accordionItems = document.querySelectorAll('.accordion-item');
				var accordionModel = document.querySelectorAll('.accordion-model');
				accordionItems.forEach((i) => {
					i.addEventListener('mouseover', function(event) {
						// 当鼠标移入元素时的处理函数
						i.style.width = '900px'
					});
					i.addEventListener('mouseout', function(event) {
						// 当鼠标移出元素时的处理函数
						i.style.width = '300px'
					});
				})

			}
		}

	}
</script>


<style>
	.content {
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 1);
	}

	.partners {
		width: 1200px;
		height: 100vh;
		color: #fff;
	}

	.accordion {
		display: flex;
	}

	.accordion-model {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
		z-index: 1;

	}

	.accordion-item:nth-child(1) {
		background-color: #2797ff;
		background-image: url('../../static/img/banner3.jpg');
	}

	.accordion-item:nth-child(2) {
		background-color: #ff6021;
		background-image: url('../../static/img/banner5.jpg');
	}

	.accordion-item:nth-child(3) {
		background-color: #1faa00;
		background-image: url('../../static/img/body_bac.jpg');
	}

	.accordion-item:nth-child(4) {
		background-color: #84aaa3;
		background-image: url('../../static/img/banner2.jpg')
	}

	.accordion-item {
		width: 300px;
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border: 2px solid #fff;
		transition: 0.3s;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;
	}

	.accordion-box {
		z-index: 2;
	}


	.accordion-header {
		font-size: 25px;
		font-weight: 600;
		line-height: 60px;
	}

	.accordion-content {
		color: #e1e1e1;
		font-size: 15px;
	}
</style>
